/*
 * @Author: HuangYue
 * @Date: 2022-05-12 14:53:20
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-12 15:46:26
 * @FilePath: /graduation/src/components/DeviceDetail/DeviceVisualization/MRI/Line.jsx
 * @Description:
 */
import React, { useState, useEffect } from 'react';
import { Line } from '@ant-design/plots';

const DemoLine = ({ data, max, min }) => {
  const config = {
    data,
    padding: 'auto',
    xField: 'time',
    yField: 'count',
    xAxis: {
      tickCount: 5,
    },
    smooth: true,
    annotations: [
      {
        type: 'line',

        /** 起始位置 */
        start: ['min', max],

        /** 结束位置 */
        end: ['max', max],
        text: {
          content: `${max}`,
          position: 'right',
          offsetY: 18,
          style: {
            textAlign: 'right',
            fill: '#F4664A',
          },
        },
        style: {
          stroke: '#F4664A',
          lineDash: [4, 4],
        },
      },
      {
        type: 'line',

        /** 起始位置 */
        start: ['min', min],

        /** 结束位置 */
        end: ['max', min],
        text: {
          content: `${min}`,
          position: 'right',
          offsetY: -6,
          style: {
            textAlign: 'right',
            fill: '#F4664A',
          },
        },
        style: {
          lineDash: [4, 4],
          stroke: '#F4664A',
        },
      },
    ],
  };

  return <Line {...config} />;
};

export default DemoLine;
